<template>
  <page-header-wrapper>
    <a-card>
      <p class="left">
        <span class="mr-2">NZD总金额：{{ moneyType(NZD) }}</span>
        <span class="mr-2">CAD总金额：{{ moneyType(CAD) }}</span>
        <a-button type="primary" class="mr-2" @click="add" v-action:add>新增</a-button>
        <FundExport :waitColumns="waitColumns" :finishColumns="finishColumns" />
      </p>
      <div class="top">
        <span class="text-xl mr-2">待处理资金安排</span>
        <span class="mr-2">NZD待处理总金额：{{ moneyType(NZD_1) }}</span>
        <span>CAD待处理总金额：{{ moneyType(CAD_1) }}</span>
      </div>
      <a-table rowKey="id" :columns="waitColumns" :data-source="waitData" :scroll="{ y: 400 }">
        <span slot="remittanceDate" slot-scope="remittanceDate"> {{ humanizeDate(remittanceDate) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="approve" slot-scope="_, record">
          <approve :record="record" @update="getData"></approve>
        </span>
        <span slot="operation" slot-scope="_, record">
          <changeDate :record="record" @update="getData" class="mr-2"></changeDate>
          <!-- <a-divider type="vertical" /> -->
          <detail :record="record" @update="getData" v-action:get></detail>
        </span>
      </a-table>

      <div class="top">
        <span class="text-xl mr-2">已处理资金安排</span>
        <span class="mr-2">NZD已处理总金额：{{ moneyType(NZD_2) }}</span>
        <span>CAD已处理总金额：{{ moneyType(CAD_2) }}</span>
      </div>
      <a-table rowKey="id" :columns="finishColumns" :data-source="finishData" :scroll="{ y: 400 }">
        <span slot="remittanceDate" slot-scope="remittanceDate"> {{ humanizeDate(remittanceDate) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="approve" slot-scope="_, record">
          <approve :record="record" @update="getData"></approve>
        </span>
        <span slot="operation" slot-scope="_, record">
          <detail :record="record" @update="getData" v-action:get></detail>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment'
import { getMoneyarrange } from '@/api/common'
const finishColumns = [
  {
    title: '银行',
    dataIndex: 'bank',
    key: 'bank'
  },
  {
    title: '货币',
    dataIndex: 'currency',
    key: 'currency'
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
    scopedSlots: { customRender: 'amount' }
  },
  {
    title: '律师',
    dataIndex: 'lawyerName',
    key: 'lawyerName'
  },
  {
    title: '汇款日期',
    dataIndex: 'remittanceDate',
    key: 'remittanceDate',
    scopedSlots: { customRender: 'remittanceDate' }
  },
  {
    title: '原因',
    dataIndex: 'reason',
    key: 'reason'
  },
  {
    title: '审批状态',
    dataIndex: 'approve',
    key: 'approve',
    scopedSlots: { customRender: 'approve' }
  }
  // {
  //   title: '操作',
  //   dataIndex: 'operation',
  //   key: 'operation',
  //   scopedSlots: { customRender: 'operation' }
  // }
]
export default {
  name: 'fund',
  components: {
    changeDate: () => import('../com/changeDate.vue'),
    detail: () => import('../com/detailDialog.vue'),
    approve: () => import('../com/apprDialog.vue'),
    FundExport: () => import('../com/fundExport.vue')
  },
  data() {
    return {
      NZD: 0,
      CAD: 0,
      NZD_1: 0,
      CAD_1: 0,
      NZD_2: 0,
      CAD_2: 0,
      waitColumns: [
        {
          title: '银行',
          dataIndex: 'bank',
          key: 'bank'
        },
        {
          title: '货币',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '律师',
          dataIndex: 'lawyerName',
          key: 'lawyerName'
        },
        {
          title: '汇款日期',
          dataIndex: 'remittanceDate',
          key: 'remittanceDate',
          scopedSlots: { customRender: 'remittanceDate' }
        },
        {
          title: '审批状态',
          dataIndex: 'approve',
          key: 'approve',
          scopedSlots: { customRender: 'approve' }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      waitData: [],
      finishData: []
    }
  },
  computed: {
    finishColumns() {
      if (this.$auth('manageFund.get')) {
        return [
          ...finishColumns,
          {
            title: '操作',
            dataIndex: 'operation',
            key: 'operation',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      } else {
        return finishColumns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    add() {
      this.$router.push({ name: 'manage/withdrawFund/add' })
    },
    async getData() {
      var res = await getMoneyarrange()
      this.waitData = res.result.data.waitlist
      this.finishData = res.result.data.finishlist
      this.NZD = res.result.data.NZD ? res.result.data.NZD : 0
      this.CAD = res.result.data.CAD ? res.result.data.CAD : 0
      this.NZD_1 = res.result.data.NZD_1 ? res.result.data.NZD_1 : 0
      this.CAD_1 = res.result.data.CAD_1 ? res.result.data.CAD_1 : 0
      this.NZD_2 = res.result.data.NZD_2 ? res.result.data.NZD_2 : 0
      this.CAD_2 = res.result.data.CAD_2 ? res.result.data.CAD_2 : 0
    }
  }
}
</script>
<style lang="css" scoped>
.left {
  margin-left: 53%;
}
.top {
  margin: 20px 0;
}
</style>
